<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import { ElDatePicker, ElInputNumber } from "element-plus";

import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import {
	COMMITMENT_TYPE_OPTIONS,
	getEnumOptionsField,
} from "@/config/enum-options";
import type { components } from "@/genapi/wh";
import {
	whManagerBsTbCommitmentGetEveryDayByCommitIdIdUsingPost,
	whManagerBsTbCommitmentSaveOrUpdateEveryDayUsingPost,
	whManagerBsTbCommitmentSaveOrUpdateUsingPost,
} from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { useCompanyStore } from "@/stores/company";
import { toDayjs } from "@/utils/to-dayjs";

import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const companyStore = useCompanyStore();

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (_type: "write" | "read" = "read", value = {} as any) => {
	type.value = _type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	if (value.id && `${value.type}` === "1") {
		//TODO 返回空
		const { data } =
			await whManagerBsTbCommitmentGetEveryDayByCommitIdIdUsingPost({
				path: {
					id: value.id,
				},
			});
		if (data) {
			model.value = data as any;
		}
	}
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<components["schemas"]["TbCommitmentDuiXiang"]>({} as any);

const timeRange = computed({
	get() {
		if (model.value.commitEndDate) {
			return [model.value.commitStartDate, model.value.commitEndDate];
		}
	},
	set(value) {
		model.value.commitStartDate = value?.[0];
		model.value.commitEndDate = value?.[1];
	},
});

const getTitle = () => {
	const commitment = getEnumOptionsField(
		COMMITMENT_TYPE_OPTIONS,
		"label",
		model.value.type,
	);
	if (type.value === "write") {
		return (model.value.id ? "编辑" : "新增") + commitment;
	} else {
		return `${commitment}详情`;
	}
};

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	if (`${model.value.type}` === "1") {
		timeRange.value ??= [
			toDayjs().format("YYYY-MM-DD"),
			toDayjs().format("YYYY-MM-DD"),
		];
		await whManagerBsTbCommitmentSaveOrUpdateEveryDayUsingPost({
			data: {
				...model.value,
				enterpriseId: companyStore.currentCompanyId,
			},
		});
	} else {
		whManagerBsTbCommitmentSaveOrUpdateUsingPost({
			data: {
				...model.value,
				enterpriseId: companyStore.currentCompanyId,
			},
		});
	}
	ElMessage.success("提交成功");
	await page.execute();
	dialogRef.value?.complete();
});
const children: FormDescChild[] = [
	{
		label: "特级动火作业",
		prop: "specialNum",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.specialNum}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.specialNum ?? "-"}处`,
	},
	{
		label: "一级动火作业",
		prop: "level1Num",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.level1Num}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.level1Num ?? "-"}处`,
	},
	{
		label: "二级动火作业",
		prop: "leve2Num",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.leve2Num}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.leve2Num ?? "-"}处`,
	},
	{
		label: "一级重大危险源",
		prop: "dangerSource1Num",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.dangerSource1Num}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.dangerSource1Num ?? "-"}处`,
	},
	{
		label: "二级重大危险源",
		prop: "dangerSource2Num",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.dangerSource2Num}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.dangerSource2Num ?? "-"}处`,
	},
	{
		label: "三级重大危险源",
		prop: "dangerSource3Num",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.dangerSource3Num}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.dangerSource3Num ?? "-"}处`,
	},
	{
		label: "四级重大危险源",
		prop: "dangerSource4Num",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.dangerSource4Num}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.dangerSource4Num ?? "-"}处`,
	},
	{
		label: "开车装置数",
		prop: "startEqpNum",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.startEqpNum}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.startEqpNum ?? "-"}处`,
	},
	{
		label: "停车装置数",
		prop: "stopEqpNum",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.stopEqpNum}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.stopEqpNum ?? "-"}处`,
	},
	{
		label: "检维修套数",
		prop: "checkEqpNum",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['套']"
				controls={false}
				v-model={model.value.checkEqpNum}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.checkEqpNum ?? "-"}套`,
	},
	{
		label: "检维修作业",
		prop: "checkEqpWorkNum",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
				controls={false}
				v-model={model.value.checkEqpWorkNum}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.checkEqpWorkNum ?? "-"}处`,
	},
	{
		label: "有无重大隐患",
		prop: "hasDanger",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElInputNumber
				controls={false}
				v-model={model.value.hasDanger}
				placeholder="请输入"
				class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
			/>
		),

		descItem: () => `${model.value.hasDanger ?? "-"}`,
	},

	{
		label: "企业承诺",
		prop: "commitDesc",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 3,
		formItem: () => (
			<el-input
				v-model={model.value.commitDesc}
				placeholder="请输入"
				rows={6}
				type="textarea"
			/>
		),
		descItem: () => `${model.value.commitDesc ?? "-"}`,
	},
];

const children2 = [
	{
		label: "承诺期限",
		prop: "commitStartDate",
		rule: [{ required: true, message: "请选择", trigger: "blur" }],
		span: 3,
		formItem: () => (
			<ElDatePicker
				type="daterange"
				valueFormat="YYYY-MM-DD"
				v-model={timeRange.value}
				start-placeholder="开始日期"
				end-placeholder="结束日期"
			/>
		),
		descItem: () => `${`${timeRange.value?.[0]}--${timeRange.value?.[1]}`}`,
	},

	{
		label: "企业承诺",
		prop: "commitDesc",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 3,
		formItem: () => (
			<el-input
				v-model={model.value.commitDesc}
				placeholder="请输入"
				rows={6}
				type="textarea"
			/>
		),
		descItem: () => `${model.value.commitDesc ?? "-"}`,
	},
];
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="getTitle()"
		:before-close="beforeClose"
		w="757px!"
	>
		<el-scrollbar m="r--20px" p="r-20px">
			<FormDesc
				ref="formDescRef"
				:type="type === 'read' ? 'desc' : 'form'"
				:form-props="{ labelPosition: 'right', labelWidth: '130px' }"
				:desc-props="{ direction: 'horizontal' }"
				form-class="gap-x-0"
				:model="model"
				:children="`${model.type}` === '1' ? children : children2"
				:column="3"
			/>
		</el-scrollbar>
		<template v-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确认</el-button
			>
		</template>
	</PromiseDialog>
</template>
